<template>
	<div>
		<div class="info-head">
			<h3>{{ photoMsg.title }}</h3>
			<p>
				<span>发表时间：{{ photoMsg.add_time | dateFormat }}</span>
				<span>点击次数：{{ photoMsg.click }}</span>
			</p>
		</div>
		<hr>

		 <vue-preview
      :list="list"
      :thumbImageStyle="{width: '80px', height: '80px', margin: '10px'}"
      :previewBoxStyle="{border: '1px solid #eee'}"
      :tapToClose="true"
    />   
		<div class="info-content" v-html="photoMsg.content"></div>
			
		<comments :id="id"></comments>
	</div>
</template>

<script>
	import comment from '../subcomponents/comment.vue'
	export default {
		data () {
			return {
				id: this.$route.params.id,
				photoMsg:{},
				list:[]
			}
		},
		created () {
			console.log(this.id)
			this.getPhotoDetail()
			this.getThumbs()
		},
		methods: {
			getPhotoDetail () {
				this.$http.get('http://www.liulongbin.top:3005/api/getimageInfo/' + this.id).then(result => {
					if ( result.body.status === 0 ) {
						// console.log(result.body.message[0])
						this.photoMsg = result.body.message[0]
					}
				})
			},
			getThumbs () {
				this.$http.get('http://www.liulongbin.top:3005/api/getthumimages/' + this.id).then(result => {
					console.log(result.body.message)
					if( result.body.status === 0) {
						result.body.message.forEach(item => {
							item.w = 600
							item.h = 400
						});
						// 保存list
						this.list = result.body.message
					}
				})
			}
		},
		components: {
			'comments':comment
		}
	}

</script>

<style>
	

</style>